import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
let { log, info, warn, error } = console;
import { NzMessageService } from 'ng-zorro-antd/message';

// interface ILogin{
//   username: string;
//   password: string;
// }

@Component({
  selector: 'app-component',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  constructor(
    public login: FormBuilder,
    private message: NzMessageService
  ) {}
  JSON = JSON;
  public validateForm!: FormGroup;
  // public products = [
  //   {
  //     id:1,
  //     name:'foo'
  //   },
  //   {
  //     id:2,
  //     name:'bar'
  //   }
  // ]
  // public login:FormBuilder = {
  //   username:'',
  //   password:''
  // }
  public passwordVisible:Boolean = false;
  
  // 提交表单
  onSubmit():void{

    // 更新表单未通过验证的控件高亮显示
    for (const i in this.validateForm.controls) {
      this.validateForm.controls[i].markAsDirty();
      this.validateForm.controls[i].updateValueAndValidity();
    }

    // 如果验证通过
    if(this.validateForm.status=='INVALID'){
      this.message.create('warning', '请填写用户名和密码');
      return;
    }

    // 如果验证通过
    if(this.validateForm.status=='VALID'){
      let { username, password } = this.validateForm.value;
      if( username == 'admin' && password == '123456' ){
        this.message.create('success', '登录成功');
      }else{
        this.message.create('error', '用户名密码错误');
      }
    }
  }

  // 初始化
  ngOnInit(): void {
    this.validateForm = this.login.group({
      username: ['', [Validators.required]],
      password: ['', [Validators.required]],
      remember: [true]
    });
  }

}
